<template>
    <div class="hotel_fitler_wrap">
        <div class="hotel_filter_item">
            <div class="hotel_filter_item_title">
                <span class="price_txt">价格</span>
                <span class="price_num">0-4000</span>
            </div>
            <div class="hotel_filter_item_content">
                <el-slider v-model="value" :max="4000" @change="change"></el-slider>
            </div>
        </div>

        <HotelFilterItem :form="form" :isOpen="isOpen" v-for="(item, index) in filterData" :key="index" @optionChange="optionChange" :optionList="item" />

        <div class="hotel_filter_item">
            <el-button type="primary" @click="delEvery">取消筛选</el-button>
        </div>
    </div>
</template>

<script>
export default {
  props:['form'],
    data() {
        return {
            value: 4000,
            options: [],
            isOpen:false
        };
    },
    methods:{
      delEvery(){
        this.isOpen=true;
        this.$emit('delEvery')
      },
      optionChange(field,id){
        this.$emit('optionChange',field,id)
      },
      change(money){
        this.$emit('changeMoney',money)
      }
    },
    computed: {
        filterData() {
            let list = [];

            list.push({
                title: "住宿等级",
                list: this.options.levels,
                field:"hotellevel"
            });
            list.push({
                title: "住宿类型",
                list: this.options.types,
                field:"hoteltype"
            });
            list.push({
                title: "酒店设施",
                list: this.options.assets,
                field:"hotelasset"
            });
            list.push({
                title: "酒店品牌",
                list: this.options.brands,
                field:"hotelbrand"
            });
            return list;
        },
    },

    async created() {
        // 获取酒店选项
        let res = await this.$axios.get("/hotels/options");
        this.options = res.data.data;
    },
};
</script>

<style lang="less" scoped>
.hotel_fitler_wrap {
    height: 80px;
    padding: 5px 0px;
    border: 1px solid #ccc;
    display: flex;
    .hotel_filter_item {
        flex: 1;
        border-right: 1px solid #ccc;
        font-size: 14px;
        color: #666;
        padding: 5px 20px;
        &:last-child {
            border: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .hotel_filter_item_title {
            display: flex;
            justify-content: space-between;
            margin-bottom: 3px;
        }
        .hotel_filter_item_content {
            width: 100%;
            height: 30px;
            line-height: 30px;
            .el-dropdown {
                width: 100%;
                .el-dropdown-link {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 12px;
                    cursor: pointer;
                }
            }
        }
    }
}

</style>
